<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="../../resource/js/jquery-3.2.1.min.js"></script>
    <script>
        $(document).ready(function () {
            var imgNumber = 0;
            var img = [
                "../../resource/images/7C533B167EDF2584A16B27209E9_4EE0DF68_33824.jpg",
                "../../resource/images/7C9181D13E95C7F72F56D4D85D8_816372DA_27AA1.jpg",
                "../../resource/images/ABC226D7B35BF771AAA7155E53B_1B8B7F2B_2C6F9.jpg",
                "../../resource/images/CC2A35EEFA0654B159A87EED9D7_B2EA9D71_18789.jpg",
                "../../resource/images/EA1BE55F439B279977C49263CA5_54320DCB_17B8F.jpg"
            ]
            // $(".headerUlLi>li").mouseenter(function () {
            //     $(this).find("ul").first().fadeIn("500ms");
            //     // alert(img[1])
            //
            // });
            // $(".headerUlLi>li").mouseleave(function () {
            //     $(this).find("ul").first().fadeOut("500ms");
            // });

            function changeImgNext() {
                imgNumber++;
                $("#imgAddress").attr("src", img[imgNumber])

                if (imgNumber > 4) imgNumber = 0;
            }

            function changeImgLast() {
                imgNumber--;
                if (imgNumber < 0) imgNumber = 4;


                $("#imgAddress").attr("src", img[imgNumber])


            }

            var timer = null; //定时器返回值，主要用于关闭定时器
            var iNow = 0; //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
            timer = setInterval(function () { //打开定时器
                // iNow++;  //让图片的索引值次序加1，这样就可以实现顺序轮播图片
                // $("#imgAddress").stop(true).fadeOut("slow")

                changeImgNext();
                // $("#imgAddress").fadeIn("100ms")

                // showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click事件
            }, 5000); //2000为轮播的时间


        });
    </script>
    <style>
        /*<!--清楚默认样式-->*/
        * {
            padding: 0;
            margin: 0;
        }

        .wrapper {
            width: 1280px;
            height: 1900px;
            margin: auto;
        }

        .header {
            width: 100%;
            height: 30%;
            background-color: sienna;
            /*position: relative;*/
        }

        .headerSerch {
            height: 22%;
        }

        .imgClazz {
            height: 410px;
            width: 1280px;

            /*visibility: visible;*/

            z-index: 1;
        }

        .main {
            width: 100%;
            height: 60%;
            position: relative;
            /*background-color: aliceblue;*/
            /*position: relative;*/
            /*position: absolute;*/
        }

        .left {
            width: 10%;
            height: 100%;
            background-color: #446398;

        }

        .content {
            width: 90%;
            height: 100%;
            background-color: #cccccc;
            position: absolute;
            top: 0px;
            left: 10%;
        }

        .footer {
            width: 100%;
            height: 20%;
            background-color: black;
        }

        .headerUlLi > li {

            list-style: none;
            height: 35px;
            width: 7.692%;
            background-color: rgba(68, 99, 152, 0.9);
            float: left;
            text-align: center; /* 水平居中 */
            line-height: 35px;

            /*border-right: 1px solid red;*/
            /*box-sizing: content-box;*//* 默认值 */
            box-sizing: border-box; /* CSS3才出现 */
        }

        .headerUlLi :hover {
            background-color: rgba(0,68,115, 1);
            /*opacity: 1;*/
            /*visibility: visible;*/
            /*transition: all 1s;*/
        }

        .headerUlLi > li > a {

            color: white;
            list-style: none;
            text-decoration: none;
        }

        /*当鼠标指到 .headerUlLi > li时候，触发.scendUlLi > li的style变化*/
        .headerUlLi > li:hover .scendUlLi > li {
            opacity: 1;
            visibility: visible;
            transition: all .5s;
            /*display: block;*/

        }

        .scendUlLi :hover {
            color: yellow;
            background-color: rgba(0, 99, 204, 0.9);

            opacity: 1;
            visibility: visible;
            transition: all .5s;
            /*231,242,20*/
        }

        .scendUlLi {
            position: relative;
            width: 170%;
            z-index: 98;
        }

        .scendUlLi > li {

            float: right;
            /*position: absolute;*/
            text-indent: 10px;
            width: 100%;

            visibility: hidden;
            opacity: 0;
            transition: all .5s;

            list-style: none;
            text-align: left;
            background-color: rgba(0, 102, 204, 0.9);

        }
        .scendUlLi > li:first-child {
            padding-top: 10px;
        }
        .scendUlLi > li:last-child {
            padding-bottom: 10px;
        }

        .scendUlLi > li > a {

            width: 85%;
            color: white;
            list-style: none;
            text-decoration: none;
            display: inline-block;
            box-sizing: border-box;
        }


    </style>


</head>
<body>

<div class="wrapper">
    <div class="header">
        <div class="headerSerch">


        </div>
        <!--页眉-->
        <div>
            <ul class="headerUlLi">
                <li><a href="#">首页</a></li>
                <li><a href="#">学校简介</a>
                    <ul class="scendUlLi">
                        <li><a href="#">现任校领导</a></li>
                        <li><a href="#">历任书记校长</a></li>
                        <li><a href="#">学校概况</a></li>
                        <li><a href="#">历史沿革</a></li>
                        <li><a href="#">校标、校训</a></li>
                        <li><a href="#">校歌</a></li>
                    </ul>
                </li>
                <li><a href="#">机构设置</a>
                    <ul class="scendUlLi">
                        <li><a href="#">党群部门</a></li>
                        <li><a href="#">行政管理部门</a></li>
                        <li><a href="#">教学单位</a></li>
                        <li><a href="#">其他机构</a></li>
                        <li><a href="#">科研机构</a></li>
                    </ul>


                </li>
                <li><a href="#">师资队伍</a>


                </li>


                <li><a href="#">科学研究</a></li>
                <li><a href="#">国际交流</a></li>
                <li><a href="#">招生就业</a>
                    <ul class="scendUlLi">
                        <li><a href="#">毕业生就业网</a></li>
                        <li><a href="#">招生信息网</a></li>
                        <li><a href="#">研究生招生</a></li>

                    </ul>


                </li>
                <li><a href="#">北海校区</a></li>
                <li><a href="#">学术会议</a>
                    <ul class="scendUlLi">
                        <li><a href="#">ICACI 2019</a></li>
                        <li><a href="#">MIME2019</a></li>
                        <li><a href="#">NRPS'2019</a></li>
                        <li><a href="#">CSET2019</a></li>

                    </ul>


                </li>
                <li><a href="#">诚聘英才</a></li>
                <li><a href="#">人才培养</a>

                    <ul class="scendUlLi">
                        <li><a href="#">本科招生</a></li>
                        <li><a href="#">本科教育</a></li>
                        <li><a href="#">研究生教育</a></li>
                        <li><a href="#">桂电信科院</a></li>
                        <li><a href="#">专科招生</a></li>
                        <li><a href="#">专科招生</a></li>
                        <li><a href="#">专科教育</a></li>

                    </ul>
                </li>
                <li><a href="#">党史学习教育</a>

                </li>
                <li><a href="#">常用链接</a>

                    <ul class="scendUlLi">
                        <li><a href="#">校外VPN访问</a></li>
                        <li><a href="#">举报</a></li>

                    </ul>

                </li>
            </ul>
        </div>
        <div class="imgChange">
            <img src="../../resource/images/7C533B167EDF2584A16B27209E9_4EE0DF68_33824.jpg" id="imgAddress"
                 class="imgClazz">


        </div>

    </div>
    <div class="main">

        <div class="left">
            左部
        </div>
        <div class="content">
            内容

        </div>
    </div>
    <div class="footer">
        页脚
    </div>
</div>

</body>
</html>